<style>
	#wrapper {
		height: 150px;
		overflow: auto;
		width: 300px;
	}
	#SortableExample li {
		margin: 2px !important;
		padding: 2px !important;
		background: #ccc !important;
		cursor: pointer;
	}
</style>

<p>Things to look for with this sortable test:</p>

<ul>
	<li>It should be a draggable, sortable list.</li>
	<li>It should display the order below the list when you release an item.</li>
	<li>It should still let you sort correctly if you scroll the list down a bit.</li>
	<li>It should not scroll for you as you drag ( that is not part of this test ).</li>
	<li>It should keep the radio selected when it is dropped.</li>
	<li>It should accept dragOptions limiting draggability to the y axis.</li>
	<li>It should detach and reattach</li>
	<li>It should not introduce new instances of sortables on attaching ( as exemplified by duplicates in "order" )
</ul>

<button id="detach-attach">detach/attach</button>

<div id="wrapper">
	<ul id="SortableExample">
		<li id="1">First <input type="radio" name="foo" checked="true"/></li>
		<li id="2">Second <input type="radio" name="foo"/></li>
		<li id="3">Third <input type="radio" name="foo"/></li>
		<li id="4">Fourth <input type="radio" name="foo"/></li>
		<li id="5">Fifth <input type="radio" name="foo"/></li>
		<li id="6">Sixth <input type="radio" name="foo"/></li>
		<li id="7">Seventh <input type="radio" name="foo"/></li>
		<li id="8">Eigth <input type="radio" name="foo"/></li>
		<li id="9">Nineth <input type="radio" name="foo"/></li>
		<li id="10">Tenth <input type="radio" name="foo"/></li>
	</ul>
</div>
<div id="order"></div>

<script src="/depender/build?require=More/Sortables"></script>
<script>

var mySort = new Sortables($('SortableExample'), {
	clone: true,
	opacity: 0.6,
	dragOptions: {
		modifiers: { x : false }
	},
	onComplete: function(){
		$('order').set('html', 'order: ' + mySort.serialize())
	}
});

var attached = true;
$('detach-attach').addEvent('click', function(){
	if (attached) mySort.detach();
	else mySort.attach();
	attached = !attached;
});

</script>
